<template>
  <div class="select">
    <el-radio-group v-model="tableLayout" @change="change(tableLayout)">
      <el-radio-button label="用户管理"/>
      <el-radio-button label="配置管理"/>
    </el-radio-group>
  </div>
  <qfTable :columns="columns" :tableData="tableData" :tableLoading="tableLoading" v-if="lab=='用户管理'">
    <!-- 操作按钮 -->
    <template v-slot:action="{row}">
      <el-button class="el-button1" @click="edit(row)">编辑</el-button>
      <el-button class="el-button2">删除</el-button>

    </template>
  </qfTable>
  <div v-else>
    <div class="text">
      角色管理
    </div>
    <div class="bbtn">
      <div class="btn">
        <el-from  ref="addFrom" :model="addFormData">
          <el-form-item label="用户名:" prop="username" class="username-form-item">
            <el-input v-model="addFormData.username" type="text" autocomplete="off" />
          </el-form-item>  
          <el-form-item label="密码:&nbsp;&nbsp;&nbsp;" prop="password" class="password-form-item">
            <el-input v-model="addFormData.password" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="昵称:&nbsp;&nbsp;&nbsp;" prop="nickname" class="nickname-form-item">
            <el-input v-model="addFormData.nickname" type="text" autocomplete="off" />
          </el-form-item>
          <div class="btnn">
            <el-button @click="addStu(addFrom)">添加用户</el-button>
          </div>
        </el-from>
      </div>
    </div>
  </div>
</template>

<script  setup>
import { ElMessage} from 'element-plus'
// 引入封装的table组件
import qfTable from "@/components/qfTable/index.vue"
// 引入发送请求的方法
import * as api from "@/api/users"
import {ref,reactive} from "vue"
let lab =ref()
let change=(tableLayout)=>{
  // console.log(tableLayout);
  lab.value = tableLayout
  // console.log(lab.value);
}
// 定义表格的表头
// 动态创建表格
let columns = ref([
  {
    label:"unid",
    prop:"unid"
  },
  {
    label:"用户名",
    prop:"username"
  },
  {
    label:"昵称",
    prop:"nickname"
  },
  {
    label:"vip等级",
    prop:"vipLevel"
  },
  {
    label:"操作",
    prop:"action"
  },
])
// 声明一个变量，存放表格数据
let tableData = ref([])
// 声明loading加载动画
let tableLoading = ref(false)
// 请求数据
let getAllUsers =async()=>{
  tableLoading.value=true;
  try{
    // 获取数据
    let res = await api.getAllUsersApi()
    console.log(res);
    tableData.value = res.data.data
    tableLoading.value=false;
  }catch(e){
    console.log(e);
    tableLoading.value=false;
  }
}
getAllUsers()
const addFrom = ref()
const addFormData = reactive({
    username: '',
    password: '',
    nickname: '',
  });
let addStu =async()=>{
  let res = await api.addUserApi(addFormData.username,addFormData.password,addFormData.nickname)
  console.log(res);
  try{
    ElMessage({
        type: 'success',
        message: '注册成功'
    })

  }catch(e){
    console.log(e);
    ElMessage({
        type: 'error',
        message: e.toString()
    })
  }
}
</script>

<script>
export default {
    meta: {
        title: 'yhgl',
        name: '用户管理',
        routeName: "users",
        icon:"#icon-yonghu"
    }
}
</script>
<style scoped lang="less">
.select{
  margin-bottom: 20px;
}
.text,.bbtn,.btnn{
  display: flex;
  justify-content: center;
  font-size: 50px;
}
.btnn{
  margin-top:40px;
}
.el-button{
  background-color: #3105f4;
  color: #fff;
  font-size: 25px;
  border: none;
  text-shadow: none;
}
.el-button1 {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
.btn{
  width: 600px;
  height: 300px;
  margin: 40px 20px;
  display: flex;
  justify-content: center;
  padding-top: 40px;
  background:linear-gradient(135deg,#707de5,#5c4aac);
  :deep(.el-form-item__label){
    font-size: 26px;
    color:#fff
  }
}
.el-button2 {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c;
}
.username-form-item,.password-form-item,.nickname-form-item{
  width: 400px;
}
</style>